<template>
  <div class="home pc">
    <!-- 头部title -->
    <HomeTitle></HomeTitle>
    <!-- 内容容器 -->
    <div class="home-container">
      <!-- list 列表 -->
      <div class="todo-flex-list">
        <div
          v-for="(item, index) in moduleList"
          :key="index"
          class="todo-flex-item"
        >
          <el-card>
            <!-- 标题 -->
            <div slot="header">
              <div
                class="card-title"
                :class="isNowDate(item.doneTime) ? 'warning-color' : ''"
              >
                {{ item.doneTime }} ToDo ({{ getWeek(item.doneTime) }})
                {{ isNowDate(item.doneTime) ? "今日" : "" }}
              </div>
            </div>

            <!-- 内容 -->
            <div class="todo-body">
              <el-form ref="form" :model="item" v-if="item.obj">
                <form-item
                  v-for="i in item.obj"
                  :key="i.uuid"
                  :isDone.sync="i.isDone"
                  :value="i.name"
                  :uuid="i.uuid"
                  :work-type="i.workType"
                  :is-urgent="i.isUrgent"
                  @changeEdit="changeEdit"
                  @switchChange="switchChange"
                ></form-item>

                <el-form-item>
                  <div
                    class="flex"
                    style="justify-content: flex-end; width: 100%"
                  >
                    <el-button type="primary" @click="dialogOpen(item.doneTime)"
                      >新增</el-button
                    >
                    <el-button
                      :disabled="isDoneAnyThing(item.doneTime)"
                      type="success"
                      @click="DELE_THIS_DAYWORK(item.doneTime)"
                      >完成</el-button
                    >
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="myTodoList.length === 0">
        <el-empty description="暂无待做事项，可新增您的待做事项" :image="image">
          <el-button type="primary" @click="dialogOpen()">新增todo</el-button>
        </el-empty>
      </div>
    </div>
    <!-- 新增todo弹窗 -->
    <el-dialog
      :title="`${isEdit ? '修改' : '新增'}todo`"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="todo-dialog-body">
        <el-form v-model="form" label-width="8rem" ref="form">
          <el-form-item label="事项">
            <el-input v-model="form.name" placeholder="请输入事项名"></el-input>
          </el-form-item>
          <el-form-item label="是否重要" style="text-align: left">
            <el-switch
              v-model="form.isUrgent"
              active-color="#13ce66"
              inactive-color="#777777"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="事项类型">
            <el-select
              style="width: 100%"
              v-model="form.workType"
              filterable
              allow-create
              multiple
              :multiple-limit="6"
              placeholder="请选择事项类型或者输入事项类型，最多输入六个"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发生日期">
            <el-date-picker
              style="width: 100%"
              v-model="form.doneTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushTodo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import HomeTitle from "@/components/home-title.vue";
import FormItem from "@/components/form-item.vue";
import { timestampToTime } from "@/utils";

import { mapState, mapGetters, mapMutations } from "vuex";
import mixin from "@/mixin";

export default {
  name: "TodoListForLifePchome",
  mixins: [mixin],
  computed: {
    ...mapState(["myTodoList"]),
    ...mapGetters(["moduleList", "isDoneAnyThing"]),
  },
  data() {
    return {
      typeOptions: [
        {
          value: "写项目",
          label: "写项目",
        },
        {
          value: "加班",
          label: "加班",
        },
        {
          value: "学习",
          label: "学习",
        },
      ],
    };
  },
  methods: {
    changeEdit(val) {
      this.form = JSON.parse(
        JSON.stringify(this.myTodoList.find((item) => item.uuid === val))
      );
      this.isEdit = true;
      this.dialogVisible = true;
    },

    switchChange(val) {
      this.SWITCH_CHANGE(val);
    },

    // 打开弹窗
    dialogOpen(date) {
      this.isEdit = false;
      this.form = {
        name: "",
        doneTime: date ? date : timestampToTime(),
      };
      this.dialogVisible = true;
    },
    // 新增todo
    pushTodo() {
      if (this.form.name === "") {
        return this.$message.error("请输入您将要完成的任务");
      }
      // 如果不是修改 则替换
      if (!this.isEdit) {
        this.PUST_MY_TODO_LIST({
          isDone: false,
          ...this.form,
        });
      } else {
        this.CHANGE_WORK(this.form);
      }

      this.dialogVisible = false;
    },
    ...mapMutations([
      "PUST_MY_TODO_LIST",
      "DELE_THIS_DAYWORK",
      "CHANGE_WORK",
      "SWITCH_CHANGE",
    ]),
  },
  components: { HomeTitle, FormItem },
};
</script>

<style lang="less">
.pc {
  .home-container {
    width: 100vw;
    height: calc(100vh - 5.2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    &::-webkit-scrollbar {
      width: 0.5rem;
      background-color: #f5f5f5;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 1rem;
      background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.44, rgb(102, 177, 255)),
        color-stop(0.72, rgb(121, 187, 255)),
        color-stop(0.86, rgb(140, 197, 255))
      );
    }

    .todo-flex-list {
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: 100%;
      .todo-flex-item {
        margin: 1.2rem;
        width: calc(50vw - 2.8rem);
      }
    }
  }

  .card-title {
    font-size: 2rem;
  }

  .todo-body {
    .el-form-item__label {
      font-size: 1.7rem;
    }
  }
}
</style>
